<template>
	<!-- 年月日 -->
	<view class="top-bg">
		<view class="card">
			<!-- 头像 -->
			<view class="text-icon">
				<view class="text-bg" v-if="type==0"></view>
				<view class="text-bg-one" v-if="type==1"></view>
				<view class="text-bg-tow" v-if="type==2"></view>
			</view>
			<!-- 年月日 -->
			<view class="baby-info">
				<!-- 消息图标 -->
				<!-- <view class="massage-img">
					<image src="../../static/message.png"></image>
				</view> -->
				<!-- 信息模块 type:0 1 2; 0:以出生，1：怀孕中，2：没填写信息 -->
				<view v-if="type==0">
					<view class="baby-date">
						<view class="baby-date-size" style="display: flex;">{{years}}
							<view v-if="years">年</view>
							{{month?month:'0'}}个月+{{birthDays ? birthDays:'0'}}天
						</view>
						<image src="../../static/edit_icon.png" @click='loginType == false? emintAuthStatus() : clickAddInfo(type)'></image>
					</view>
					<view class="info type1">
						<view class="info-text" style="padding-left: 0;flex: 1;text-align: center;">
							点击查看讲解
						</view>
					</view>
				</view>

				<view v-if="type==1">
					<view class="baby-date">
						<view class="baby-date-size">孕{{weeks}}周+{{days}}天</view>
						<image src="../../static/edit_icon.png" @click='loginType == false? emintAuthStatus() : clickAddInfo(type)'></image>
					</view>
					<view class="baby-date-size1">
						<!-- 您的宝宝即将出生 -->
						距离预产期{{dueDay}}天
					</view>
					<view class="info type1">
						<view class="info-text" style="padding-left: 0;flex: 1;text-align: center;">
							点击查看讲解
						</view>
					</view>
				</view>

				<view v-if="type==2">
					<view class="baby-date">
						<view class="baby-date-size" style="font-size: 19px;">完善孕检信息</view>
						<image src="../../static/edit_icon.png" @click='loginType == false? emintAuthStatus() : clickAddInfo(type)'></image>
					</view>
					<view class="baby-date-size1">
						以便获得更优质的服务
					</view>
					<view class="info type1" style="box-shadow: 1px 3px 2px rgba(26, 26, 26, 0.2);">
						<view class="info-text" style="padding-left: 0;flex: 1;text-align: center;" @click='loginType == false? emintAuthStatus() : clickAddInfo(type)'>
							点击完善信息
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 报告查询 -->
		<view class="top-list">
			<view class="list-left">
				<view v-if="type != '2'" class="cu-avatar list-img round " style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg);"></view>
				<view v-else class="cu-avatar list-img round tishi"></view>
			</view>
			<view class="list-title" v-if="type != '2'" @click="clickSeeBaogao">
				点击此处查询报告
			</view>
			<view class="list-title" v-else @click="loginType == false? emintAuthStatus() : clickAddInfo(type)">
				<view class="text-black project-title">
					<view class="text-cut-title">未绑定信息</view>
					<view class="text-gray text-sm brief">点击完善信息，查看更多报告</view>
				</view>
			</view>
			<span class="cuIcon-right" style="margin-left: 1vw;"></span>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			type: {
				type: Number,
				default: 0
			},
			loginType: {
				type: Boolean,
				default: false
			},
			days: {
				type: String,
				default: ''
			},
			weeks: {
				type: String,
				default: ''
			},
			dueDay: {
				type: String,
				default: ''
			},
			years: {
				type: String,
				default: ''
			},
			month: {
				type: String,
				default: ''
			},
			birthDays: {
				type: String,
				default: ''
			},

		},
		data() {
			return {};
		},
		onShow() {},
		methods: {
			clickAddInfo(type) {
				uni.navigateTo({
					url: '../../pages/index/addInfo/index?type=' + type
				})
			},
			emintAuthStatus() {
				this.$emit('emintAuthStatus', false)
			},
			// 查看报告
			clickSeeBaogao() {
				uni.switchTab({
					url: '../../pages/cart/cart'
				})
			}
		}
	}
</script>

<style lang="less">
	.flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.top-bg {
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 38vh;
		background-color: #fff;
		z-index: -2;
		padding-top: 2.5vh;
		padding-bottom: 2.5vh;

		.card {

			// 孩子信息
			.baby-info {
				display: flex;
				justify-content: center;
				flex-direction: column;
				flex: 0.6;
				height: 100%;

				// 日期
				.baby-date {
					display: flex;
					align-items: center;

					.baby-date-size {
						font-size: 40upx;
						font-weight: bold;
						color: #606266;
					}

					image {
						width: 40upx;
						height: 40upx;
						margin-left: 20upx;
					}
				}

				.baby-date-size1 {
					font-size: 3vw;
					color: #909090;
					margin-top: 0.5vh;
				}

				// 说明文字
				.info {
					.flex;
					width: 80%;
					height: 6vh;
					margin-top: 3.7vh;
					border-radius: 30px;
					background: linear-gradient(153deg, #7AADFF 0%, #5496FF 100%);
					padding-left: 25upx;

					.info-text {
						// flex: 0.8;
						font-size: 3.8vw;
						color: #fff;
					}

					image {
						.flex;
						flex: 0.2;
						width: 5upx;
						height: 20upx;
						padding-right: 20upx;
					}
				}

				.type1 {
					margin-top: 1.7vh;
					width: 60%;
					height: auto;
					min-height: 4.5vh;
					padding-left: 0;
				}

			}

			// 图标
			.massage-img {
				height: 3vh;
				width: 5.5vw;
				position: absolute;
				top: 2vh;
				right: 5vw;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.flex;
			height: 22.5vh;
			width: 85%;
			border-radius: 16upx;
			background-color: #fff;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
			position: relative;

			// 孩子头像
			.baby-icon {
				.flex;
				flex: 0.4;
				width: 100%;
				height: 100%;
				padding-bottom: 40upx;

				.user-img {
					height: 23vw;
					width: 23vw;
					font-size: 2.5em;
				}

			}

			.text-icon {
				.flex;
				flex: 0.4;
				width: 100%;
				height: 100%;

				.bg {
					background-position-y: 2vh;
					background-repeat: no-repeat;
					border-bottom-left-radius: 16upx;
					width: 100%;
					height: 100%;
				}

				.text-bg {
					background-image: url(../../static/index/baobei-bg.png);
					background-size: 84.5%;
					.bg;
				}

				.text-bg-one {
					background-image: url(../../static/index/yunfu-bg.png);
					background-size: 84.5%;
					.bg;
				}

				.text-bg-tow {
					background-image: url(../../static/index/text-bg.png);
					background-size: 100%;
					background-position-x: -4vw;
					.bg;
				}
			}
		}

		.top-list {
			height: 6vh;
			width: 100%;
			margin-top: 4vh;
			.flex;

			.list-left {
				.flex;
				flex: 0.15;
				width: 100%;
				height: 100%;
				padding-left: 2vw;


				.list-img {
					height: 11vw;
					width: 11vw;
					font-size: 2.5em;
				}

				.tishi {
					background-image: url(../../static/index/tishi.png);
				}
			}

			.list-title {
				flex: 0.75;
				display: flex;
				align-items: center;
				color: #1c58ff;
				font-size: 3.8vw;
			}

			.list-rignt {
				flex: 0.1;
			}
		}

	}

	.top-bg::after {
		content: '';
		width: 110%;
		height: 9vh;
		position: absolute;
		z-index: -1;
		left: -5%;
		overflow-x: hidden;
		top: 0;
		border-radius: 0 0 50% 50%; //左上角，右上角，右下角，左下角
		background: #276af3;
		// }
	}
</style>
